<template>
  <div class="search-container">
    <a-form
      :model="formData"
      :rules="rules"
      ref="formRef"
      @submit="handleSearch"
      layout="inline"
    >
      <a-form-item field="userAccount" label="账号">
        <a-input
          class="accountInput"
          v-model="formData.userAccount"
          placeholder="英文,分割可以查询多个(查一个和查多个的时间是相同的)"
        />
      </a-form-item>
      <a-form-item field="rangeValue" label="时间范围">
        <a-range-picker
          show-time
          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          v-model="formData.rangeValue"
          :shortcuts="rangeShortcuts"
          shortcuts-position="left"
        />
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary" :loading="searchLoading">
          搜索
        </a-button>
      </a-form-item>
    </a-form>
    <div class="search-table mt20">
      <a-radio-group type="button" v-model="checkedAccount">
        <a-radio
          v-for="item of accountOptions"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}
        </a-radio>
      </a-radio-group>
      <a-table
        :columns="columns"
        :data="tabelList"
        :pagination="false"
        v-bind="tableConfig"
        size="medium"
      >
        <template #created_at="{ record }">
          {{ formatDate(record.created_at) }}
        </template>
        <template #updated_at="{ record }">
          {{ formatDate(record.updated_at) }}
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, useTemplateRef, computed } from 'vue'
import {
  getTodayRange,
  getTwoDaysRange,
  getYesterdayRange,
} from '@/utils/dayUtils'
import { getColumns } from './config/battleConfig'
import { formatDate } from '@/utils/dayUtils'
import { getBattleCount } from '@/api/search'
import to from '@/utils/to'

// 186552676
const { height } = defineProps<{
  height: number
}>()

const formData = ref({
  userAccount: '',
  rangeValue: [],
})
const rules = {
  userAccount: [{ required: true, message: '请输入账号' }],
  rangeValue: [{ required: true, message: '请选择时间范围' }],
}
const tableConfig = computed(() => {
  return {
    scroll: {
      x: 1470,
    },
    virtualListProps: {
      height: height,
    },
  }
})
const formRef = useTemplateRef('formRef')
const rangeShortcuts = ref([
  {
    label: '今日',
    value: () => getTodayRange(),
  },
  {
    label: '昨日',
    value: () => getYesterdayRange(),
  },
  // 两天
  {
    label: '两天内',
    value: () => getTwoDaysRange(),
  },
])
const columns = getColumns()
const tabelList = computed(() => {
  return tabelListMap.value[checkedAccount.value]
})
const searchLoading = ref(false)
const tabelListMap = ref<any>({})
const checkedAccount = ref('')
const accountOptions = computed(() => {
  return Object.keys(tabelListMap.value).map((item) => {
    return {
      label: item,
      value: item,
    }
  })
})
const handleSearch = async () => {
  const errors = await formRef.value.validate()
  if (errors) return
  searchLoading.value = true
  const { userAccount, rangeValue } = formData.value
  const [res] = await to(
    getBattleCount(userAccount, rangeValue[0], rangeValue[1])
  )
  if (res) {
    let obj: any = {}
    res.data.forEach((item: any) => {
      if (item.info) {
        const infos = JSON.parse(item.info)
        let info = {
          ...item,
          timer: infos[0],
          count: infos[1],
        }
        const currentId = info.user_id
        if (!obj[currentId]) {
          obj[currentId] = []
        }
        obj[currentId].push(info)
      }
      return item
    })
    tabelListMap.value = obj
    if (Object.keys(obj).length) {
      checkedAccount.value = Object.keys(obj)[0]
    }
  }
  searchLoading.value = false
}
</script>

<style scoped lang="scss">
.accountInput {
  width: 500px;
}
</style>
